<template>
  <div class="page-content">
    <div class="header">
      <h3>直播课管理</h3>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="短视频管理" :name="1"></el-tab-pane>
      <el-tab-pane label="直播间管理" :name="2"></el-tab-pane>
    </el-tabs>

    <div class="question-group" v-show="activeName === 1">
      <div class="left">
        <publisher-group
          :key="groupKey"
          :publisher-group="tableData"
          :default-group="defaultGroupId"
          @select-publisher="handleSelectPublisher"
          @update-publisher-group="getData"
        ></publisher-group>
      </div>
      <div class="right">
        <div class="header">
          <h3>短视频列表</h3>
        </div>
        <video-table :edit-info="editData"></video-table>
      </div>
    </div>

    <div v-if="activeName === 2">
      <live-stream></live-stream>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { getCreatorPage } from '@/api/marketing'
  import VideoTable from '@/views/result/components/VideoTable.vue'
  import PublisherGroup from '@/views/result/components/PublisherGroup.vue'
  import LiveStream from './components/LiveStream.vue'

  interface GroupItem {
    id: string
    name: string
    introduction: string
    gender: number
    avatarUrl: string
    [key: string]: any
  }

  const activeName = ref(1)
  const editData = ref<any>()
  const tableLoading = ref(false)
  const tableData = ref<GroupItem[]>([])
  const defaultGroupId = ref('')
  const groupKey = ref(1)

  async function getData() {
    try {
      tableLoading.value = true
      const res = await getCreatorPage({
        pageNum: 1,
        pageSize: 1000
      })
      if (res.code === '00000') {
        tableData.value = res.data.list
      }
    } catch (e) {
    } finally {
      tableLoading.value = false
    }
  }

  function handleSelectPublisher(value: any) {
    editData.value = value
  }

  onMounted(async () => {
    await getData()

    if (tableData.value.length > 0) {
      editData.value = tableData.value[0]
      defaultGroupId.value = tableData.value[0].id
      groupKey.value = new Date().getTime()
    }
  })
</script>

<style lang="scss" scoped>
  ::v-deep(.row-parent) {
    background-color: #f4f6f8;
  }

  ::v-deep(.row-child) {
    background-color: #fff;
  }

  .drag-over-line {
    position: absolute;
    height: 2px;
    background-color: #409eff;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
  }

  .icon-drag {
    color: var(--el-color-primary);
    margin-right: 10px;
    cursor: move;
  }

  .icon-rotate {
    color: var(--el-color-primary);
    display: inline-block;
  }

  .icon {
    margin-right: 10px;
    margin-bottom: -6px;
  }

  .child-drag {
    padding-left: 45px;
  }

  .page-content {
    .header {
      margin-bottom: 20px;
    }
  }

  .question-group {
    display: flex;
    width: 100%;

    .left {
      width: 300px;
      margin-right: 20px;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
    }

    .right {
      flex: 1;
      height: 100%;
      overflow-x: auto;

      .header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        p {
          margin-left: 2px;
          font-size: 12px;
        }
      }
    }
  }
</style>
